import { PureComponent } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Modal,
	DatePicker,
	TreeSelect
} from 'antd';
import SelectDeptTree from '@/components/SelectDeptTree';
import styles from './ProUserList.less';
const FormItem = Form.Item;
const { Option } = Select;


@Form.create()
class SystemSelectModal extends PureComponent {

	constructor(props) {
	    super(props);
	    this.state = {
			selectType: 'all',
	    }
	}

	onChange = (val) => {
		console.log(val);
		if(val == "1") {
			this.setState({
				selectType: 'all'
			})
		}else if(val == "2") {
			this.setState({
				selectType: 'person'
			})
		}else {
			this.setState({
				selectType: 'company'
			})
		}
	}


	okHandle = () => {
		const { form,handleAddBySystemSelect } = this.props;
		form.validateFields((err, fieldsValue) => {
			if (err) return;
			console.log(fieldsValue);
			form.resetFields();
			handleAddBySystemSelect(fieldsValue);
		});
	};

	resetInput = () => {
		this.setState({
			selectType: 'all',
		})
	}

  render() {
  		const {
			modalVisibleBySystemSelect,
			form,
			handleModalVisibleBySystemSelect,
		} = this.props;

		//人员
		const person = [
		  {
		    title: '武某',
		    value: '武某',
		    key: '0',
		  },
		  {
		    title: '李某',
		    value: '李某',
		    key: '1',
		  },
		  {
		    title: '王某',
		    value: '王某',
		    key: '2',
		  },
		  {
		    title: '陈某',
		    value: '陈某',
		    key: '3',
		  },
		  {
		    title: '周某',
		    value: '周某',
		    key: '4',
		  },
		  {
		    title: '章某',
		    value: '章某',
		    key: '5',
		  },
		  {
		    title: '刘某',
		    value: '刘某',
		    key: '6',
		  },
		];

		//单位
		const company = [
		  {
		    title: '内蒙古自治区兴安盟公安局',
		    value: '内蒙古自治区兴安盟公安局',
		    key: '0',
		  },
		  {
		    title: '内蒙古自治区呼和浩特市公安局',
		    value: '内蒙古自治区呼和浩特市公安局',
		    key: '1',
		  },
		  {
		    title: '内蒙古自治区乌海市公安局',
		    value: '内蒙古自治区乌海市公安局',
		    key: '2',
		  },
		  {
		    title: '北京市海淀区公安局',
		    value: '北京市海淀区公安局',
		    key: '3',
		  },
		  {
		    title: '北京市朝阳区公安局',
		    value: '北京市朝阳区公安局',
		    key: '4',
		  },
		  {
		    title: '河北省保定市公安局',
		    value: '河北省保定市公安局',
		    key: '5',
		  },
		  {
		    title: '山东省德州市公安局',
		    value: '山东省德州市公安局',
		    key: '6',
		  },
		];

		let selectContent;

		const { selectType } = this.state;
		console.log(selectType);
		if(selectType == "person") {
			selectContent = (
				<Col  md={12} sm={24}>
			        <FormItem  label="人员">
			            {form.getFieldDecorator('person',{
			            	rules: [{ required: true, message: '请选择人员！'}],
			            })(
			            	<TreeSelect
						      	showSearch
						        style={{ width: '100%' }}
						        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
						        treeData={person}
						        placeholder="请选择"
						        filterTreeNode={(input, treeNode) =>
						        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
						        }
						    />
			            )}
			        </FormItem>
        		</Col>
			)
		}else if(selectType == "company") {
			selectContent = (
				<Col  md={12} sm={24}>
			        <FormItem  label="单位">
			            {form.getFieldDecorator('company',{
			            	rules: [{ required: true, message: '请选择单位！'}],
			            })(
			            	<TreeSelect
						      	showSearch
						        style={{ width: '100%' }}
						        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
						        treeData={company}
						        placeholder="请选择"
						        filterTreeNode={(input, treeNode) =>
						        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
						        }
						    />
			            )}
			        </FormItem>
        		</Col>
			)
		}
return (
    <Modal
width={600}
centered
destroyOnClose
title="系统筛选"
visible={modalVisibleBySystemSelect}
onOk={this.okHandle}
onCancel={() => handleModalVisibleBySystemSelect()}
afterClose={() => this.resetInput()}
>
<div className={styles.systemSelectPoint}>
	由于警衔变动自动判别需要,
	需按预定处理日期计算相关参数,包括:工龄、警龄、任现行政职务年数、任现专业技术职务年数、任现职级年数、任现警衔年数等参数(不包括已经上报但还未审批的人员)。
</div>
<Form  layout="vertical">

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="是否包含下级机关">
	            {form.getFieldDecorator('is_superior_office')(
	            	<Select placeholder="请选择" style={{ width: '100%' }}>
	                	<Option value="1">是</Option>
	                    <Option value="0">否</Option>
	                </Select>
	            )}
	        </FormItem>
        </Col>
        <Col  md={12} sm={24}>
	        <FormItem  label="预定处理时间">
	            {form.getFieldDecorator('user_name_cn', {
	            rules: [{ required: true, message: '请选择预定处理时间！'}],
	            })(<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
	        </FormItem>
        </Col>

    </Row>


    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
          <FormItem  label="批次名称">
              {form.getFieldDecorator('batch_name',{
              	rules: [{ required: false, message: '请输入批次名称！'}],
              })(<Input placeholder="请输入" />)}
          </FormItem>
        </Col>

        <Col  md={12} sm={24}>
	        <FormItem  label="筛选类型">
	            {form.getFieldDecorator('select_type',{
	            	rules: [{ required: true, message: '请选择筛选类型！'}],
	            	initialValue: "1",
	            })(
	            	<Select placeholder="请选择" style={{ width: '100%' }} onChange={this.onChange}>
	                	<Option value="1">全部</Option>
	                    <Option value="2">人员</Option>
	                    <Option value="3">单位</Option>
	                </Select>
	            )}
	        </FormItem>
        </Col>

    </Row>
    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
         {selectContent}
    </Row>


</Form>
</Modal>
);
  }

}

export default SystemSelectModal;
